@extends('admin.base')

@section('content')
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <div class="layui-card" id="app">
        <div class="layui-card-header layuiadmin-card-header-auto">
            <div class="layui-btn-group">
                <button class="layui-btn layui-btn-sm" id="create">添 加</button>
            </div>
        </div>
        <div class="layui-card-body">
            <el-tree
                    :data="lists"
                    show-checkbox
                    node-key="id"
                    default-expand-all
                    :expand-on-click-node="false">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span>@{{ node.label }}</span>
                    <span>
                        <el-button
                              type="text"
                              size="mini"
                              icon="el-icon-plus"
                              @click="() => append(data)">
                        </el-button>
                        <el-button
                              type="text"
                              size="mini"
                              icon="el-icon-delete"
                              @click="() => remove(node, data)">
                        </el-button>
                    </span>
                </span>
            </el-tree>
        </div>
    </div>

    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
        <span>这是一段信息</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>

    <style>
        .custom-tree-node {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            padding-right: 8px;
        }
    </style>
@endsection

@section('script')
    <script type="text/javascript">
        let id = 1000;
        let vm = new Vue({
            el:'#app',
            data:{
                lists: [],
                form: {
                    id: 0,
                    name: '',
                    parent_id: 0,
                    sort: 0,
                },
                dialogVisible: false
            },
            methods:{
                append(data){
                    const newChild = { id: id++, label: 'testtest', children: [] };
                    if (!data.children) {
                        this.$set(data, 'children', []);
                    }
                    data.children.push(newChild);
                },
                remove(node, data){
                    const parent = node.parent;
                    const children = parent.data.children || parent.data;
                    const index = children.findIndex(d => d.id === data.id);
                    children.splice(index, 1);
                },
                getData(){
                    let loading = this.loadingTrue();
                    let _this = this;
                    $.ajax({
                        url: '/admin/api/brands',
                        type: 'get',
                        dataType: 'json',
                        success:function (response) {
                            if (response.code === 0) {
                                _this.lists = response.data;
                            } else {
                                this.$message({
                                    message: response.message,
                                    type: 'warning'
                                });
                            }
                            loading.close();
                        }
                    });
                },
                handleClose(){

                },
                loadingTrue(){
                    return this.$loading({
                        lock: true,
                        text: 'Loading',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                }
            },
            mounted() {
                this.getData();
            }
        })
    </script>
@endsection



